<template>
    <el-dialog
    
    v-model="dialogVisible" title="新增" 
    min-width="30%"
    draggable>

        <el-form>

            <el-form-item label="名称">
                <el-input size="large" :placeholder="'名称'" v-model="requestParam.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="编码">
                <el-input size="large" :placeholder="'编码'" v-model="requestParam.code" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 上传图片 -->
            <el-form-item label="图片">
                <input type="file" name="file" id="file" style="display: none;" @change="uploadFile" />
                <el-button size="small" v-if="!isFileUploading && (requestParam.fileIdOfImg==''||requestParam.fileIdOfImg==null)" type="primary"
                    @click.prevent="fileClick()">点击上传</el-button>

                <div v-if="requestParam.fileIdOfImg!=''&&requestParam.fileIdOfImg!=null">

                    <el-image class="img-uploaded" fit="contain"
                        :preview-src-list="[$kt.file.visit(requestParam.fileIdOfImg)]" :preview-teleported="true"
                        :src="$kt.file.visit(requestParam.fileIdOfImg)" alt="点击修改"
                        style="width: 100px; height: 100px;"></el-image>

                    <el-button @click="fileClick()" type="text">修改</el-button>

                </div>


            </el-form-item>

            <el-form-item>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-form-item>

        </el-form>

        <template v-slot:footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>


<script lang="ts" setup>
import { ref,defineEmits,defineExpose } from 'vue';
let dialogVisible = ref(false);
import $kt from '@/vueKantboot';
import { ElLoading, ElMessage } from 'element-plus'
import { de, fa } from 'element-plus/es/locale';

// emits
let emits = defineEmits(['submit']);

let requestParam = ref({
    id: null,
    code: null,
    name: null,
    parentId: null,
    fileIdOfImg: null,
});

// 是否文件正在上传
let isFileUploading = ref(false);

/**
 * 打开弹窗
 */
let open = (param: any) => {
    if(param){
        requestParam.value = JSON.parse(JSON.stringify(param));
    }    

    dialogVisible.value = true;
}


let fileClick = () => {
    document.getElementById('file')?.click();
}

let uploadFile = async (param: any) => {
    let file = param.target.files[0];
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    isFileUploading.value = true;

    // TODO: 上传图片
    const response = await $kt.request.upload({
        data: {
            file: file,
            groupCode: 'goodsType'
        },
    }).then((res: any) => {
        if (res.data.success) {
            ElMessage({
                message: '上传成功',
                type: 'success',
            })

            // 给图片id赋值
            requestParam.value.fileIdOfImg = res.data.data.id;
            isFileUploading.value = false;
            loading.close();
            return false;
        }
        isFileUploading.value = false;
        loading.close();
        ElMessage({
            message: res.data.errMsg,
            type: 'error',
        });


    })



}



let submit = () => {

    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })

    $kt.request.request({
        url: '/business-goods-web/admin/goodsType/save',
        method: 'post',
        data: requestParam.value,
    }).then((res) => {
        if (res.data.success) {
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
            dialogVisible.value = false;

            loading.close();
            // 提交
            emits('submit');
            dialogVisible.value = false;
            return false;
        }
        ElMessage({
            message: res.data.errMsg,
            type: 'error',
        });
    });



}



// 暴露给父组件的方法
defineExpose({
    open
})


</script>


<style lang="scss" scoped>
.img-uploaded {
    cursor: pointer;
}

.img-uploaded:hover {
    opacity: 0.8;
}
</style>